<template>
  <div id="home-page">
    <section>
      <h1><label>{{name}}</label> 欢迎登录好客酒店商家管理平台</h1>
      <div class="warpper" v-for="(item,index) in loginTime" :key="index">
          <div class="text-first">
              <div class="title">
                  <label>{{item.loginInfo}}</label>
              </div>
              <div class="address">
                  <label>本次登录地址 {{item.ip}}</label>
              </div>
          </div>
          <div class="time">
              <label>{{item.loginDate}}</label>
          </div>
      </div>
    </section>
    <section>
        <h1>待办事项</h1>
        <div class="warpper" v-for="item in contentAll" :key="item.title">
            <div class="text-second">
                <label>{{item.title}}</label>
            </div>
            <div class="num">
                <label :class="{'red': item.num === 0, 'grey': item.num === 1, 'blue': item.num === 2}">{{item.value}}</label>单
            </div>
        </div>
    </section>
  </div>
</template>

<script>
import { receivesMessage } from "../public/js/message";
export default {
  name: "HomePage",
  data() {
    return {
      loginTime: [],
      contentAll: [],
      name: sessionStorage.name
    };
  },
  created() {
    this._receivesMessage();
    this.loginTime = JSON.parse(sessionStorage.getItem("loginTime"));
  },
  mounted() {
    // window.bus.$on('pageInformation', res => {
    //     console.log(res);
    //   this.contentAll = [
    //     {title: '待处理订单', value: res.orderCount, num: 0},
    //     {title: '今日新订单', value: res.todayNewCount, num: 1},
    //     {title: '今日入住订单', value: res.todayLiveCount, num: 1},
    //     {title: '未处理消息', value: res.count, num: 2}
    //   ]
    // })
  },
  methods: {
    _receivesMessage() {
      receivesMessage().then(res => {
        console.log(res);
        this.contentAll = [
          { title: "待处理订单", value: res.data.orderCount, num: 0 },
          { title: "今日新订单", value: res.data.todayNewCount, num: 1 },
          { title: "今日入住订单", value: res.data.todayLiveCount, num: 1 },
          { title: "未处理消息", value: res.data.count, num: 2 }
        ];
         console.log(this.contentAll);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#home-page {
  font-size: 12px;
  padding: 0 30px;
  h1 {
    font-size: 16px;
    text-align: left;
    color: #6d2377;
    padding: 30px 0;
  }
  h1 + div {
    border-top: 1px solid #f6f6f6;
  }
  .warpper {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 10px 20px;
    line-height: 2.8;
    border-bottom: 1px solid #f6f6f6;
    .text-first,
    .text-second {
      text-align: left;
      .title,
      .address {
        text-align: left;
      }
    }
    .text-second {
      line-height: 5;
    }
    .time,
    .num {
      text-align: right;
    }
    .num {
      label {
        font-size: 18px;
        margin-right: 10px;
      }
      .red {
        color: #f2665d;
      }
      .blue {
        color: #6d2377;
      }
      .grey {
        color: #415161;
      }
    }
    .time {
      line-height: 5;
    }
  }
  .warpper:hover {
    background-color: #eef1f9;
    .text-first,
    .time {
      color: #6d2377;
    }
  }
}
</style>
